<template>
	<view>
		
		<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="agant_today flexRow">
				<view class="agant_today_border">
					<view class="agant_today_title">今日新增代理</view>
					<view class="agant_today_info"><text class="agant_today_number">{{newCount}}</text> <text class="agant_today_count">人</text> </view>
				</view>
				<view class="">
					<view class="agant_today_title">总代理</view>
					<view class="agant_today_info"><text class="agant_today_number">{{total}}</text> <text class="agant_today_count">人</text> </view>
				</view>
			</view>
			<view class="agant_row" v-for="(item,key) in list" :key="key">
				<view class="agant_row_title flexRow">
					<text class="agant_row_title_L text-ellipsis">昵称：{{item.nickname || ''}}</text> <text class="agant_row_title_R text-ellipsis">ID：{{item.id || 0}}</text>
				</view>
				<view class="agant_row_content flexRow">
					<view class="agant_content_child agant_content_border">
						<view class="agant_content_text">代理时间</view>
						<view class="">{{item.agent_time}}</view>
					</view>
					<view class="agant_content_child agant_content_border">
						<view class="agant_content_text">代理奖励</view>
						<view class="">{{item.agent_fee}}</view>
					</view>
					<view class="agant_content_child">
						<view class="agant_content_text">最后登录时间</view>
						<view class="">{{item.last_time}}</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		
	</view>
</template>

<script>
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import request from '../../apiRequest/request.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				newCount: 0,
				total: 0,
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				}
			}
		},
		onLoad() {

		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				request.agentDetailList(page.num,10).then(res=>{
					if(page.num==1) this.list = [];
					this.list = this.list.concat(res.data.list)
					this.newCount = res.data.newCount
					this.total = res.data.total
					let hasNext =  res.data.list.length < 10? false:true;
					this.mescroll.endSuccess(this.list.length,hasNext)
				}).catch(err=>{
					this.$unexpected(err)
				})
			}
		}
	}
</script>

<style>
page{
	background:rgba(248,248,248,1);
}
.agant_today{
	width: 100%;
	min-height:300rpx;
	background:rgba(4,137,255,1);
	box-sizing: border-box;
	padding: 60rpx 0;
	align-items: center;
}
.agant_today>view{
	flex: 1;
	text-align: center;
}
.agant_today_border{
	border-right: 2rpx solid rgba(255,255,255,1);
}
.agant_today_title{
	font-size:30rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(255,255,255,1);
	line-height:30rpx;
	margin-bottom: 23rpx;
}
.agant_today_info{
	vertical-align: bottom;
}
.agant_today_number{
	font-size:68rpx;
	font-family:Arial;
	font-weight:bold;
	color:rgba(255,255,255,1);
	line-height:68rpx;
	opacity:0.99;
	padding-right: 8rpx;
}
.agant_today_count{
	font-size:30rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(255,255,255,1);
	line-height:30rpx;
}
.agant_row{
	margin-top: 20rpx;
	background:rgba(255,255,255,1);
	padding: 0 20rpx;
}
.agant_row_title{
	border-bottom: 1rpx solid rgba(238,238,238,1);
	line-height: 66rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(100,100,100,1);
}
.agant_row_title_L,.agant_row_title_R{
	/* padding-right: 80rpx; */
	width: 350rpx;
}
.agant_row_content{
	padding: 40rpx 0;
	min-height: 180rpx;
	box-sizing: border-box;
}
.agant_row_content>view{
	flex: 1;
	text-align: center;
}
.agant_content_border{
	border-right: 2rpx solid rgba(238,238,238,1);
}
.agant_content_child>view{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(172,172,172,1);
}
.agant_content_text{
	margin-bottom: 20rpx;
}
</style>
